import { Component } from 'react';

import {CheckboxField,SearchBar,Boxs,Button,Group,Popup,RadioField} from 'saltui';
const { HBox, Box} = Boxs;
import './table.less';

export default class PageHome extends Component {

  constructor(props) {
    super(props);

    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    var height='';
    if(isAndroid==true){
        height = window.screen.height-70-44-45+"px";
    }else if(isiOS==true){
        height = window.screen.availHeight-70-44-45+"px";
    }else {
        if(window.screen.availHeight) {
            height = '550px';
        }
    }

    this.state = {
        search:'',
        change:true,

        data: [],
        selectedData:[],
        selectNum:0,
        checked:'checkbox',
        placeholder:'搜索',
        showName:'text',
        searchField:'text',

        height:height,

        visible:false,
    }
  }

  componentDidMount(){
   
  } 

  // 子组件初始化
  initState() {
    const t = this;
    // 是否显示 
    let visible = t.props.visible;
    // 搜索提示
    let placeholder = t.props.placeholder;
    // 待选择的数据
    let data = t.props.data;
    // 选中的数据
    let value = t.props.value;
    // 单选多选标识
    let checked = t.props.checked;
    // 回显字段名称
    let showName = t.props.showName;
    // 搜索的值
    let searchField = t.props.searchField;

    // 选中的个数
    let selectNum = 0;

    // 单选
    if (checked == 'radio') {
        if (data != null && data.length > 0) {
            let tempNum = '0';
            for (var j=0;j<data.length;j++) {
                if (data[j].text != null && data[j].text != '' && data[j].text != 'undefined' && data[j].text != 'null' && data[j].text != undefined) {
                  data[j].text = data[j].text.replace(/null/g , '');
                  data[j].text = data[j].text.replace(/,/g , '    ');
                }

               // 重复来回选择某两个，改掉没选的checked属性为false 
               if (value != null && value != '' && value != undefined && value != 'undefined') {
                  if (data[j].value == value.value && tempNum == '0') {
                    data[j].checked = true;
                    tempNum = '1';
                  } else {
                    data[j].checked = false;
                  }
               } else {
                  // 都没选时，设置checked属性为false 
                  data[j].checked = false;
               }
            }
        }
    } else {
      // 多选
      if (value == null || value == 'null' || value == '' || value == undefined || value == 'undefined') {
        value = [];
      } else {
        selectNum = value.length;
      }

      // 循环处理选中的状态
      if (data != null && data.length > 0) {
          for (var j=0;j<data.length;j++) {
             if (data[j].text != null && data[j].text != '' && data[j].text != 'undefined' && data[j].text != 'null' && data[j].text != undefined) {
                  data[j].text = data[j].text.replace(/null/g , '');
                  data[j].text = data[j].text.replace(/,/g , '    ');
             }
             
             data[j].disable = false;
             if (value != null && value.length > 0) {
                var checkStr = '';
                for (var ii=0;ii<value.length;ii++) {
                    var obj = value[ii];
                    obj.checked = true;

                    if (obj.value == data[j].value) {
                        if (data[j].noShow) {
                            data[j].disable = true;
                        }
                        data[j].checked = true;

                        checkStr += data[j].value + ';';
                        continue;
                    } else {
                        if (checkStr == '' || checkStr.indexOf(data[j].value) == -1) {
                            data[j].checked = false;
                        }
                    }
                }
             } else {
                data[j].checked = false;
             }
          }
      }
    }

    t.setState({
      change:true,
      placeholder:placeholder,
      data:data,
      selectedData:value,
      checked:checked,
      showName:showName,
      visible: visible,
      selectNum:selectNum,
      searchField:searchField,
    });
  }
   
  // 多选勾选触发
  changeSelectBox(type,value){

      if (type == '1') {
        // 选择页面选择
        for(var j=0;j<value.length;j++){
           value.checked=true;
        };

        this.setState({
          selectNum:value.length,
          selectedData:value,
        });
      } else {
        // 确认页面选择
        // 选中的数据
        let selectedData = this.state.selectedData;
        let checkedId = '';
        if (selectedData != null && selectedData.length > 0) {
            for (var i = selectedData.length - 1; i >= 0; i--) {
              let obj = selectedData[i];
              if (value != null && value.length > 0) {
                  for (var k = 0; k < value.length; k++) {
                      let vObj = value[k];
                      if (vObj.value == obj.value) {
                        if (checkedId.indexOf(obj.value) == -1) {
                            // 选中状态
                            obj.checked = true;
                            checkedId += ';' + obj.value;
                        }
                      } else {
                        // 未选中状态
                        if (checkedId.indexOf(obj.value) == -1) {
                            obj.checked = false;
                        }
                      }
                  }
              } else {
                // 选中为空
                obj.checked = false;
              }
            }
        }

        this.setState({
          selectNum:value.length,
          selectedData:selectedData,
        });
      }
  } 

  // 点击已选触发
  selectedBoxs(){
    let selectedData = this.state.selectedData;
    if (selectedData != null && selectedData.length > 0) {
      for (var i = selectedData.length - 1; i >= 0; i--) {
        var obj = selectedData[i];
        obj.disable = false;
      }
    }
   this.setState({
      change:!this.state.change,
      selectedData:selectedData,
    });
  }

  // 查看已选页，点击完成触发
  selectedOk(){
    // 搜索值
    let search = this.state.search;

    // 已选页列表数据（包括已选和在已选页取消选择的数据）
    let selectedData = this.state.selectedData;
    let tempData = [];
    var dataAll=this.state.data;
    for (var i=0;i<selectedData.length;i++) {
        var selectedObj = selectedData[i];
        if (selectedObj.checked == true) {
            tempData.push(selectedObj);
        }
    }

    let checkId = '';
    // 对可选列表的显示和隐藏进行控制
    for(var ii=0;ii<dataAll.length;ii++){
        var tempObj = dataAll[ii];
        // 处理选择列表是否隐藏
        if (tempObj.noShow) {
            tempObj.disable = true;
        } else {
            tempObj.disable = false;
        }

        // 处理选择列表是否选中
        if (tempData != null && tempData.length > 0) {
            for (var j=0;j<tempData.length;j++) {
              var obj = tempData[j];
              if (obj.value == tempObj.value) {
                  if (checkId.indexOf(obj.value) == -1) {
                      tempObj.checked = true;
                      checkId += ';' + tempObj.value;
                  }
              } else {
                  if (checkId.indexOf(tempObj.value) == -1) {
                      tempObj.checked = false;
                  }
              }
            }
        } else {
              tempObj.checked = false;
        }
    }

    this.setState({
      change:!this.state.change,
      data:dataAll,
      selectedData:tempData,
    }, () => {
    });
  }

  //搜索
  onSearch(keyword) {
    // 查询字段
    keyword = keyword.trim();
    this.setState({
      search:keyword
    });

    // 搜索的字段
    let searchField = this.state.searchField;
    let searchArr = null;
    if (searchField != null) {
        searchArr = searchField.split(',');
    }

    // 列表集合
    var dataAll=this.state.data;
    if (keyword != '') {
      if (dataAll != null && dataAll.length > 0) {
          for(var j=0;j<dataAll.length;j++){
              var obj = dataAll[j];
              if (obj != null) {
                  obj.disable=true;
                  // 循环判断是否在查询字段中
                  if (searchArr != null && searchArr.length > 0) {
                      for (var hh = searchArr.length - 1; hh >= 0; hh--) {
                        var searchObj = searchArr[hh];
                        var text = obj[searchObj];
                        text = text + '';
                        if (text === null || text === 'null' || text === '') {
                            text = '';
                        }
                        
                        if (text != '' && text.indexOf(keyword) != -1) {
                          obj.disable=false;
                        }
                      }
                  }

                  if (obj.noShow) {
                     obj.disable=true;
                  }
              }
          }
      }
    } else {
      if (dataAll != null && dataAll.length > 0) {
          for(var j=0;j<dataAll.length;j++){
              var obj = dataAll[j];
              if (obj != null) {
                  // 是否可显示，不能显示的disable设置为true，反之为false
                  if (obj.noShow) {
                    obj.disable=true;
                  } else {
                    obj.disable=false;
                  }
              }
          }
      }
    }

    let t = this;
    t.setState({
      data:dataAll,
    }, () => {
    });
  }

  //退出
  onExit(keyword){
    if (keyword == null || keyword == 'null' || keyword == '' || keyword == undefined || keyword == 'undefined') {
        keyword = '';
    }
    // 查询字段
    this.setState({
      search:keyword
    });

    // 搜索的字段
    let searchField = this.state.searchField;
    let searchArr = null;
    if (searchField != null) {
        searchArr = searchField.split(',');
    }

    // 列表集合
    var dataAll=this.state.data;
    if (keyword != '') {
      if (dataAll != null && dataAll.length > 0) {
          for(var j=0;j<dataAll.length;j++){
              var obj = dataAll[j];
              if (obj != null) {
                   obj.disable=true;
                   
                  // 循环判断是否在查询字段中
                  if (searchArr != null && searchArr.length > 0) {
                      for (var hh = searchArr.length - 1; hh >= 0; hh--) {
                        var searchObj = searchArr[hh];
                        var text = obj[searchObj];
                        text = text + '';
                        if (text === null || text === 'null' || text === '') {
                            text = '';
                        }
                        
                        if (text != '' && text.indexOf(keyword) != -1) {
                          obj.disable=false;
                        }
                      }
                  }

                  if (obj.noShow) {
                     obj.disable=true;
                  }
              }
          }
      }
    } else {
      if (dataAll != null && dataAll.length > 0) {
          for(var j=0;j<dataAll.length;j++){
              var obj = dataAll[j];
              if (obj != null) {
                  // 是否可显示，不能显示的disable设置为true，反之为false
                  if (obj.noShow) {
                    obj.disable=true;
                  } else {
                    obj.disable=false;
                  }
              }
          }
      }
    }
    this.setState({
      data:dataAll,
    }, () => {
        /*this.instance.update(this.getContent());*/
    });
  }

  // 确定按钮触发
  submitCofirm() {
    let t = this;
    var dataAll=this.state.selectedData;
    var result = [];
    var selectText='';
    // 回显属性名
    let showName = this.state.showName;

    for(var j=0;j<dataAll.length;j++){
      var obj = dataAll[j];
      let text = obj[showName];
      if (text != '') {
          if (selectText == '') {
              selectText = text;
          } else {
              selectText = selectText + ',' + text;
          }
      }
      result.push(obj);
    }

    t.setState({
      visible: false
    }, () => {
      this.props.onChange(result);
    });
  }

  //单选方法 changeSelectBox2()  
  changeSelectBox2(value, index, data){
    let t = this;
    var selectText=[];
    var checkedData = '';
    let showName = this.state.showName;
    for(var j=0;j<data.length;j++){
      if(data[j].checked==true){
       selectText = data[j][showName]; 
       checkedData = data[j];
      }
    };

    t.setState({
      selectText:selectText, 
      visible: false
    }, () => {
       this.props.onChange(checkedData);
       $("#App").removeAttr("style");
       $(document).scrollTop(t.props.top);
       Popup.hide();
    });
  } 


  // 弹出页的列表
  getContent() {
      // 单选多选标识
      let checked = this.state.checked;

      // 选择列表数据
      let data = this.state.data;
      // 被选中的个数
      let selectNum = this.state.selectNum;
      // 选中的数据
      let selectedData = this.state.selectedData;

      // 搜索提示语
      let placeholder = this.state.placeholder;

      let height = this.state.height;

      // 返回结构
      let content = "";
      if (checked == 'radio') {
          // 单选
          content = (      
              <div id="com-popup-div" className="dd-popup-container" style={{width:300}}>
                <SearchBar 
                      hasHistory={false} 
                      instantSearch={false} 
                      onSearch={this.onSearch.bind(this)}  
                      placeholder={placeholder}
                      onExit={this.onExit.bind(this)}>
                </SearchBar>
                <div className="dd-checkbox-wrap">
                    <RadioField 
                      data={data} 
                      mode='list'
                      iconPosition="right"
                      onChange={this.changeSelectBox2.bind(this)}  
                    />
                </div>
              </div>
          );
      } else {
          // 多选
          content = (      
            <div id="com-popup-div" className="dd-popup-container t-PR" style={{width:300}}>
                <div className={this.state.change?"":"t-DN"}>
                  <SearchBar 
                      hasHistory={false} 
                      instantSearch={false} 
                      onSearch={this.onSearch.bind(this)}  
                      placeholder={placeholder}
                      onExit={this.onExit.bind(this)}>
                  </SearchBar>
                </div>
                <div className={this.state.change?"t-DN":""} >
                    <HBox vAlign="center">
                      <Box flex={1} className="t-FS16 t-P16 t-FCc">已选{selectNum}个</Box>
                      <Box className="t-PR16 t-FCddblue" onClick={this.selectedOk.bind(this)}>完成</Box>
                    </HBox>
                </div>
                <div className={this.state.change?"dd-checkbox-wrap":"t-DN"} style={{overflow:"auto" , height: `${height}`,}}>
                <Group.List className="t-PB68">
                    <CheckboxField 
                      data={data} 
                      value={selectNum} 
                      mode='list' 
                      iconPosition="left"  
                      onChange={this.changeSelectBox.bind(this,'1')}
                    />
                </Group.List>
                </div>
                <Group.List className={this.state.change?"t-DN":"dd-checkbox-wrap"} >
                    <CheckboxField 
                      data={selectedData} 
                      value={selectNum} 
                      mode='list' 
                      iconPosition="right"  
                      onChange={this.changeSelectBox.bind(this,'2')}
                    />
                </Group.List>
                <HBox vAlign="center" className={this.state.change?"t-bottom-fixed":"t-DN"} style={{width:300}}>
                  <Box flex={2} className="t-FS16 t-PL16 t-FCddblue" onClick={this.selectedBoxs.bind(this)} >已选{selectNum}个</Box>
                  <Box flex={1}   onClick={this.submitCofirm.bind(this)}>
                    <Button type="primary" display="banner" >确定</Button>
                  </Box>
                </HBox>
              </div>
          );
      }
      return content;
    }

   // 点击蒙层关闭
   closMask(){
      this.props.closMask(this);
   }

  render() {
    

    return (
      <div >
        <Popup
          content={this.getContent()}
          animationType="slide-left"
          onMaskClick={() => { this.setState({ visible: false });this.closMask(); }}
          visible={this.state.visible}
        >
          {null}
        </Popup>
     </div>   
    )
  }
}

